<template>
<!--底部导航-->
  <div class="appFooter">
    <van-tabbar v-model="index" style="height:70px;" active-color="#01bf47" :z-index="1000" @change="changeBar">
      <van-tabbar-item>
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon1.active : icon1.normal">
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon2.active : icon2.normal">
      </van-tabbar-item>
    </van-tabbar>

    <p style="text-align:center;bottom:0;position: fixed;z-index:1001;width: 100%;font-size:0.001em;">
      <a href="http://www.beian.miit.gov.cn" target="_blank">备案号（琼ICP备18002094号）</a>
    </p>
  </div>
</template>
<script>
export default {
  name: "appFooter",
  props: ["active"],
  data() {
    return {
      index:this.active,
      icon1: {
        normal: "https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/ic_home_n.png",
        active: "https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/ic_home_c.png"
      },
      icon2: {
        normal: "https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/ic_mine_n.png",
        active: "https://stnz.oss-cn-hangzhou.aliyuncs.com/assets/images/ic_mine_c.png"
      }
    };
  },
  mounted() {},
  methods: {
    changeBar(index) {
		console.log(index)
      switch (index) {
        case 0:
          this.$router.push("/");
          break;
        case 1:
          this.$router.push("/user");
          break;
      }
    }
  }
};
</script>
<style scoped>
.appFooter {
	/* border-top: 1px solid #eeeeee; */
}
</style>

